<template>
  <!--
    作者：luoyiming
    时间：2020-06-04
    描述：插件中心-直播-直播房间列表-修改
  -->
  <div title="创建直播间">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="直播间名称" prop="name"><el-input v-model="ruleForm.name" class="max-w460"></el-input></el-form-item>

      <el-form-item label="直播封面图" prop="coverImgId">
        <div>
          <el-button type="primary" @click="openUpload('cover')">上传图片</el-button>
          <img :src="coverImgPath" class="mt10" :width="120" v-if="ruleForm.coverImgId != ''" />
          <div class="gray9">建议尺寸1080*1920,大小不超过2M</div>
          <!--上传图片组件-->
          <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
        </div>
      </el-form-item>

      <el-form-item label="直播时间" prop="time">
        <el-row>
          <el-date-picker v-model="ruleForm.startTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
          <el-date-picker
            class="ml20"
            v-model="ruleForm.endTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择结束时间"
          ></el-date-picker>
        </el-row>
      </el-form-item>

      <el-form-item label="主播昵称" prop="anchorName"><el-input v-model="ruleForm.anchorName" class="max-w460"></el-input></el-form-item>

      <el-form-item label="主播微信号" prop="anchorWechat"><el-input v-model="ruleForm.anchorWechat" class="max-w460"></el-input></el-form-item>

      <el-form-item label="直播分享图" prop="shareImgId">
        <div>
          <el-button type="primary" @click="openUpload('share')">上传图片</el-button>
          <img :src="shareImgPath" class="mt10" :width="120" v-if="ruleForm.shareImgId != ''" />
          <div class="gray9">建议像素800*640，大小不超过1M</div>
          <!--上传图片组件-->
          <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
        </div>
      </el-form-item>
      <el-form-item label="购物直播频道封面图" prop="feedsImgId">
        <div>
          <el-button type="primary" @click="openUpload('feeds')">上传图片</el-button>
          <img :src="feedsImgPath" class="mt10" :width="120" v-if="ruleForm.feedsImgId != ''" />
          <div class="gray9">建议像素800*800，大小不超过100KB</div>
          <!--上传图片组件-->
          <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
        </div>
      </el-form-item>
      <!--       <el-form-item label="推流类型" prop="type">
         <el-radio-group v-model="ruleForm.type">
           <el-radio :label = "0" >手机直播</el-radio>
           <el-radio :label = "1" >推流</el-radio>
         </el-radio-group>
       </el-form-item> -->
      <el-form-item label="是否开启点赞" prop="closeLike">
        <el-radio-group v-model="ruleForm.closeLike">
          <el-radio :label="0">开启</el-radio>
          <el-radio :label="1">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否开启直播货架" prop="closeGoods">
        <el-radio-group v-model="ruleForm.closeGoods">
          <el-radio :label="0">开启</el-radio>
          <el-radio :label="1">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否开启评论" prop="closeComment">
        <el-radio-group v-model="ruleForm.closeComment">
          <el-radio :label="0">开启</el-radio>
          <el-radio :label="1">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
      <el-button @click="cancelFunc()">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">立即创建</el-button>
    </div>
  </div>
</template>

<script>
import wxLiveApi from '@/api/wxlive.js';
import Upload from '@/components/file/Upload.vue';

export default {
  components: {
    /*图片上传*/
    Upload: Upload
  },

  data() {
    var validateTime = (rule, value, callback) => {
      if (!this.ruleForm.startTime) {
        callback(new Error('请选择开始时间'));
        return;
      }
      if (!this.ruleForm.endTime) {
        callback(new Error('请选择结束时间'));
        return;
      }
      callback();
    };
    return {
      /*是否上传图片*/
      isupload: false,
      isImg: false,
      type: '',

      coverImgPath: '',
      shareImgPath: '',
      feedsImgPath: '',

      ruleForm: {
        name: '',
        coverImgId: 0,
        startTime: '',
        endTime: '',
        anchorName: '',
        anchorWechat: '',
        shareImgId: '',
        feedsImgId: '',
        type: '',
        closeLike: '',
        closeGoods: '',
        closeComment: ''
      },

      rules: {
        name: [{ required: true, message: '请输入直播间名称', trigger: 'blur' }, { min: 3, max: 17, message: '长度在 3 到 17 个字符', trigger: 'blur' }],
        anchorName: [{ required: true, message: '请输入主播昵称', trigger: 'blur' }, { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }],
        anchorWechat: [{ required: true, message: '请输入主播微信号', trigger: 'blur' }],
        coverImgId: [{ required: true, message: '请选择封面图片', trigger: 'change' }],
        shareImgId: [{ required: true, message: '请选择分享图片', trigger: 'change' }],
        feedsImgId: [{ required: true, message: '请选择购物直播频道封面图', trigger: 'change' }],
        time: [{ validator: validateTime, trigger: 'blur' }],
        /* startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ], */
        type: [{ required: true, message: '请选择推流类型', trigger: 'change' }],
        closeLike: [{ required: true, message: '请选择是否开启点赞', trigger: 'change' }],
        closeGoods: [{ required: true, message: '请选择是否开启直播货架', trigger: 'change' }],
        closeComment: [{ required: true, message: '请选择是否开启评论', trigger: 'change' }]
      },

      /*左边长度*/
      formLabelWidth: '120px',
      /*是否显示*/
      dialogVisible: false,
      loading: false
    };
  },
  props: ['open'],
  watch: {
    open: function(n, o) {
      if (n != o) {
        this.dialogVisible = n;
      }
    }
  },

  created() {},

  methods: {
    submitForm(formName) {
      let self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          let param = self.ruleForm;
          wxLiveApi.createRoom(param).then(data => {
            ElMessage({
              message: '创建成功',
              type: 'success'
            });
            this.$router.back(-1);
          });
        } else {
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },

    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    },

    /*上传图片*/
    uploadFile(fileId) {
      let self = this;
      const loading = ElLoading.service({
        lock: true,
        text: '文件上传中,请等待',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      wxLiveApi.uploadFile({ fileId },err=>{
        loading.close();
      })
        .then(response => {
          loading.close();
          ElMessage({
            message: '上传文件至微信成功',
            type: 'success'
          });
        })
        .catch(response => {
          loading.close();
        });
    },

    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        if (this.type == 'cover') {
          this.coverImgPath = e[0].filePath;
          this.ruleForm.coverImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.coverImgId);
        } else if (this.type == 'share') {
          this.shareImgPath = e[0].filePath;
          this.ruleForm.shareImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.shareImgId);
        } else if (this.type == 'feeds') {
          this.feedsImgPath = e[0].filePath;
          this.ruleForm.feedsImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.coverImgId);
        }
      } else {
      }
      this.isupload = false;
    }
  }
};
</script>

<style>
.img {
  margin-top: 10px;
}
</style>
